<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import TableOption from '@/components/TableOption.vue'
import MilkmanOption from './MilkmanOption.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAllMilkman, Milkman, removeMilkman, resetPasswords } from '@/api/milkman'

const setMilkmanMessage = (index: number, milkman: Milkman) => {
  showOptionDialog.value = true
  dialogType.value = 'set'
  defaultRuleForm.value = milkman
}

const deleteMilkmanMessage = async (index: number, milkman: Milkman) => {
  try {
    await ElMessageBox.confirm(
      '确定删除当前送奶工？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
  } catch {
    return
  }
  try {
    await removeMilkman(milkman.id)
    await getMilkManList()
    ElMessage.success('删除成功')
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}

const setPasswords = async (index: number, milkman: Milkman) => {
  try {
    await ElMessageBox.confirm(
      '确定重置密码？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
  } catch {
    return
  }
  try {
    await resetPasswords(milkman.id)
    ElMessage.success('重置成功' + milkman.user_name + '密码为 123456')
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}

// 新增送奶工
const showOptionDialog = ref(false)
const dialogType = ref('add')
const defaultRuleForm = ref<Milkman>({} as Milkman)

const defaultButtonoption = () => {
  showOptionDialog.value = true
  dialogType.value = 'add'
  defaultRuleForm.value = {} as Milkman
}

const milkMansList = ref<Milkman[]>()
const getMilkManList = async () => {
  milkMansList.value = await getAllMilkman()
}
onMounted(async () => {
  await getMilkManList()
})

</script>
<template>
  <el-card shadow="Never">
    <TableOption
      :showSearch="false"
      defaultButtonText="新增送奶工"
      @defaultButtonoption="defaultButtonoption"
    />
    <el-table :data="milkMansList" height="500" style="width: 100%">
      <el-table-column prop="name" label="账号" width="180" />
      <el-table-column prop="user_name" label="姓名" width="180" />
      <el-table-column prop="created_at" label="创建时间" />
      <el-table-column prop="updated_at" label="修改时间" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button type="text" size="small" @click="setPasswords(scope.$index, scope.row)">重置密码</el-button>
          <el-button type="text" size="small" @click="setMilkmanMessage(scope.$index, scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="deleteMilkmanMessage(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <MilkmanOption
    :showAddDialog="showOptionDialog"
    :dialogType="dialogType"
    :defaultRuleForm="defaultRuleForm"
    @closeDialog="showOptionDialog = false"
    @optionSuccess="getMilkManList(), showOptionDialog = false"
    >
  </MilkmanOption>
</template>
